.button
  --button-color #000
  height 32px
  border none
  cursor pointer
  padding 0 15px
  outline none
  display inline-flex
  background-color #fff
  align-items center
  border-radius 5px
  text-align center
  text-decoration none
  transition all 100ms ease
  justify-content center
  color var(--button-color)
  box-shadow inset 0px -1px 0px rgba(#000, 0.1), inset 0px 0px 0px 1px rgba(#000, 0.15)

  font-weight 500
  font-size 14px

  &_newUI
    .button__extra
      margin-left 3px

  &_waiting,
  &_disabled,
  &:disabled,
  &[disabled]
    --button-color rgba(#000, 0.5)
    pointer-events none
    background-color #efefef

  &:hover
    box-shadow 0px 2px 4px rgba(#000, 0.05), inset 0px -1px 0px rgba(#000, 0.1), inset 0px 0px 0px 1px rgba(#000, 0.2)

  &:active
    background linear-gradient(0deg, rgba(#000, 0.02), rgba(#000, 0.02)), #FFFFFF
    box-shadow inset 0px 1px 0px rgba(#000, 0.1), inset 0px 0px 0px 1px rgba(#000, 0.2)

  &:focus
    outline none
    box-shadow 0px 0px 0px 6px rgba($accent_color, 0.2), inset 0px -1px 0px rgba(#000, 0.1), inset 0px 0px 0px 1px rgba(#000, 0.15), inset 0px 0px 0px 1px rgba($accent_color, 0.2)

  &__extra
    font-size 14px
    line-height 16px
    display flex
    color rgba(#000, 0.4)
    align-items center
    margin-left 7px
    margin-right -7px


  &__icon
    display flex
    width 16px
    height 100%
    align-items center

    &:not(:only-child)
      margin-right 12px

    &:only-child
      flex 1
      align-items center
      justify-content center

  &_type
    &_text
      padding 0

    &_text, &_link, ^[0][href]
      padding 0
      min-width 0
      box-shadow none
      background none

      &:hover
        box-shadow none

    &_link, ^[0][href]
      --button-color $accent_color
      text-decoration underline

  &_look
    &_primary
      --button-color #fff
      background-color $accent_color
      box-shadow none
      box-shadow inset 0px -1px 0px rgba(#000, 0.1)

      &:disabled
        --button-color rgba(#fff, 0.8)
        background-color #BBBBBB

      &:hover
        color var(--button-color)
        background linear-gradient(0deg, rgba(#fff, 0.1), rgba(#fff, 0.1)), $accent_color
        box-shadow 0px 2px 4px rgba($accent_color, 0.3), inset 0px -1px 0px rgba(#000, 0.1)

      &:active
        color var(--button-color)
        background linear-gradient(0deg, rgba(#000, 0.04), rgba(#000, 0.04)), $accent_color
        box-shadow inset 0px 1px 0px rgba(#000, 0.1)

      &:focus
        box-shadow 0px 0px 0px 6px rgba($accent_color, 0.2), inset 0px -1px 0px rgba(#000, 0.1)

    &_danger
      --button-color $danger_color

    &_destructive
      --button-color #fff
      background-color $danger_color

    &_outlined
      background none
      padding 1.5rem 2rem
      font-size .875rem
      border: 1px solid var(--primary_link);
      outline: none;
      box-shadow: none;
      color: var(--grape_700);

    &_alt
      --button-color #000
      box-shadow none
      background-color rgba(0,0,0,.05)

      &:hover,
      &:focus,
      &:active
        --button-color #000
        box-shadow none
        background-color rgba(0,0,0,.08)

      &:disabled
        --button-color rgba(0,0,0,.02)
        background-color rgba(0,0,0,.05)

    &_active
      background none
      border-radius 4px
      border 1px solid #dfdfde
      box-shadow none
      outline none

      &:focus
        box-shadow none

  &_look_destructive:disabled,
  &_look_destructive&_waiting
    --button-color rgba(#fff, 0.5)
    background-color $danger_color

  &_danger&_look_alt,
  &_danger&_type_text
    --button-color $danger_color

    &:disabled
      --button-color rgba(0,0,0,.02)
      background-color rgba(0,0,0,.05)

  &_size
    &_compact
      height 36px
      font-size 16px
      line-height 20px

    &_medium
      height 32px
      font-size 14px
      line-height 20px

    &_small
      height 24px
      font-size 12px
      line-height 12px
      padding 0 10px

    &_large
      height 40px
      font-size 16px

  &_size_small &__extra
    margin-left 5px
    margin-right -5px

  &_size_medium &__extra
    margin-left 7px
    margin-right -7px

  &_size_compact &__extra
    margin-left 7px
    margin-right -7px

  &_size_large &__extra
    margin-left 10px
    margin-right -10px

  &_nopadding
    padding 0

  &_withIcon
    justify-content space-between

  &_withIcon:not(&_type_link):not(&[href])
    padding 0 14px

  &_withIcon&_size_small
    padding 0 10px

  &_waiting
    pointer-events none
    background-repeat repeat
    background-position 40px
    background-size 37px 100%
    animation button-waiting 1s linear infinite
    background-image repeating-linear-gradient(
      -63.43deg,
      rgba(#fff, 0.2) 1px,
      #efefef 2px,
      #efefef 6px,
      rgba(#fff, 0.2) 7px,
      rgba(#fff, 0.2) 12px
    )
    background-color #fff

  &_waiting&_look_primary
    background-image repeating-linear-gradient(
      -63.43deg,
      rgba(#fff, 0.2) 1px,
      transparent 2px,
      transparent 6px,
      rgba(#fff, 0.2) 7px,
      rgba(#fff, 0.2) 12px
    )
    background-color $accent_color

  &_size_small &__icon
    width 12px

    &:not(:only-child)
      margin-right 8px

.button-group
  display flex

  &:not(&_collapsed)
    .button + .button
      margin-left 16px

  &_collapsed
    .button:first-child
      border-radius 5px 0 0 5px

    .button:last-child
      border-radius 0 5px 5px 0

    .button:not(:first-child):not(:last-child)
      border-radius 0

@keyframes button-waiting
  0%
    background-position 0 0

  100%
    background-position 37px 0
